<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文章列表</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./libs/layui/css/modules/layer/default/layer.css">
    <script src="./js/http.js"></script>
    <script src="./libs/jquery/jquery.min.js"></script>
    <script src="./libs/layui/lay/modules/layer.js"></script>

</head>

<body>
    <div class="container-fluid">
        <div class="common_title">
            用户信息修改
        </div>
        <div class="container-fluid common_con">
            <form class="form-horizontal article_form" id="form">
                <div class="form-group">
                    <label for="inputEmail1" class="col-sm-2 control-label">用户名称：</label>
                    <div class="col-sm-4">
                        <input type="text" name="username" class="form-control username" id="username" value="李思思">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail2" class="col-sm-2 control-label">昵称：</label>
                    <div class="col-sm-4">
                        <input type="text" name="nickname" class="form-control nickname" id="nickname" value="哈哈思">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">邮箱：</label>
                    <div class="col-sm-4">
                        <input type="email" name="email" class="form-control email" id="email" value="520@163.com">
                    </div>
                </div>

                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">用户图标：</label>
                    <div class="col-sm-10">
                        <img src="images/2.jpg" alt="" class="user_pic" id="user_pic">
                        <input name="userPic" type="file" onchange="changeImg()" id="exampleInputFile">
                    </div>
                </div>

                <div class="form-group">
                    <label for="inputEmail4" class="col-sm-2 control-label">密码：</label>
                    <div class="col-sm-4">
                        <input type="password" name="password" class="form-control password" id="password"
                            value="12345678">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-success btn-edit">修改</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script>
        $(function () {
            /* 1.0 请求用户信息 */
            get_user();

            changeuser();

        })
        /* 1.0 请求获取用户的信息赋值对应的元素 */
        function get_user() {
            /* 1.1 发送获取请求 */
            myAjax('get', '/admin/user/detail', '', function (gl) {
                /* 1.2 进行是否成功判定 */
                if (gl.code !== 200) {
                    layer.msg('数据请求失败');
                    return;
                }

                /* 数据返回类型
                {
                    "code": 200,
                    "msg": "获取成功",
                    "data": {
                        "nickname": "李思思",
                        "userPic": "http://localhost:8080/icon.jpg",
                        "email": "sisili@qq.com",
                        "password": "123456",
                        "username": "admin"
                    }
                } */
                /* 1.3 进行相应的元素赋值 */
                let username = $('#username');
                let nickname = $('#nickname');
                let email = $('#email');
                let password = $('#password');
                username = gl.data.username;
                nickname = gl.data.nickname;
                email = gl.data.email;
                password = gl.data.password;
                $('#user_pic').attr('src', gl.data.userPic);

            });
        };

        /* 2.0 修改用户数据 进行提交 */
        function changeuser() {

            /* 2.1 form 的提交事件 */
            $('#form').submit(function (e) {
                //阻止浏览器自动默认提交行为
                e.preventDefault();
                // console.log(1);

                /*2.2 获取相对应的元素中的值  */
                let formData = new FormData();
                formData.append("username", $('#username').val());
                formData.append("nickname", $('#nickname').val());
                formData.append("email", $('#email').val());
                formData.append("password", $('#password').val());
                let file = document.querySelector('#exampleInputFile').files[0];
                formData.append("userPic", file);

                /* 2.3 发送数据 */
                myAjax('post', '/admin/user/edit', formData, function (gl) {
                    // console.log(gl);
                    if (gl.code !== 200) {
                        layer.msg('提交失败');
                        return;
                    }

                    layer.msg('提交成功啦')

                    /* 2.4 刷新index 主页的用户信息 */
                    window.parent.get_userInfo();
                })
            })
        }

        /* 3.0 实现本地图片的浏览 */
        function changeImg() {
            /* 3.1 获取文件对象 */
            let file = document.querySelector('#exampleInputFile').files[0];

            /* 3.2 创建本地路径 : */
            let url = URL.createObjectURL(file);

            /* 3.3 将本地路径赋值给img 的src */
            $('#user_pic').attr('src', url);
        }


    </script>
</body>

</html>